<template>
    <div style="height: 100vh;">
        <div class="show-wap">
            <div class="input_box">
                <LeftOutlined @click="handlehomepage" style="color:var(--color-text);" />
                <a-input v-model:value="searchText" placeholder="" class="custom-input" @pressEnter="handleSearch"
                    style="background-color:var(--color-bg); ">
                    <!-- @focus="showHistory = true" 输入框 -->
                    <template #prefix>
                            <SearchOutlined style="color:var(--color-text);font-size:var(--text-16px);" />
                    </template>
                </a-input>
            </div>
            <div class="historicalrecords">
                <div class="history-panel">
                    <div class="history-title" style=" color:var(--color-text)">最近搜索</div>
                    <div class="history-items">
                        <div v-for="(item, index) in searchHistory" :key="index" class="history-item"
                            @click="selectHistory(item)">
                            {{ item }}
                            <CloseOutlined class="history-remove" @click.stop="removeHistory(index)" />
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script setup>
import { SearchOutlined, CloseOutlined } from '@ant-design/icons-vue';
import { ref, } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()

const searchHistory = ref([
    'UI设计',
    'UI设计瀑布流',
    '网页设计',
    'UI设计项目复盘',

]);
const searchText = ref()

const selectHistory = (item) => {
    console.log(item);

    searchText.value = item;
    // showHistory.value = false;
};

const handleSearch = () => {
    console.log("回车");

}

const removeHistory = (index) => {
    searchHistory.value.splice(index, 1);
};

const handleclose = () => {
    themeStore.searcShow.txet = '';
    console.log(!themeStore.searcShow.visible, "关闭后");
    themeStore.searcShow.visible = !themeStore.searcShow.visible
}

const handlehomepage = () => {
    router.push({
        path: '/'
    })

}

</script>

<style lang="less" scoped>
.input_box {
    width: 90%;
    margin: 0 auto;
    margin-top: 10px;
    display: flex;
    gap: 20px;

    .custom-input {
        width: 100%;
        
        border-radius: 50px !important;
        height: 40px !important;
        overflow: hidden;
        display: flex;
        align-items: center;
        &:hover,
        &:focus,
        &:focus-within {
            border-color: #d9d9d9 !important;
            box-shadow: none !important;

            .ant-input-prefix {
                color: rgba(0, 0, 0, 0.25) !important;
              

            }
        }
    }
}

::v-deep .ant-input-affix-wrapper>input.ant-input {
    font-size: var(--text-16px) !important;
    color: var(--color-search-t) !important;
   

}


.historicalrecords {
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;


    .history-items {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;


        .history-item {

            background: var(--color-seabg);
            border-radius: 50px;
            padding: 8px 10px;
            font-size: var(--text-16px);
            cursor: pointer;
            display: flex;
            align-items: center;
          
            color: var(--color-text);
            gap: 10px;
            transition: all 0.2s;

            .history-remove{
                font-size: 12px;
                // color: red;
            }
            


        }
    }


}
</style>